<template>
  <div class="edit-container">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      title="编辑资料"
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <!-- 头像部分 -->
    <div class="avatar">
      <van-image fit="cover" round :src="userinfo.photo" />
    </div>
    <!-- 信息展示 -->
    <van-cell-group>
      <van-cell
        is-link
        title="名称"
        :value="userinfo.name"
        @click="showDialogclick"
      />
      <van-cell
        is-link
        title="性别"
        :value="userinfo.gender ? '女' : '男'"
        @click="showsex = true"
      />
      <van-cell
        is-link
        title="生日"
        :value="userinfo.birthday"
        @click="showpicker = true"
      />
    </van-cell-group>
    <!-- 修改昵称 -->
    <van-dialog
      v-model="showdialog"
      title="修改昵称"
      show-cancel-button
      @confirm="isconfirm"
    >
      <van-field v-model="value" placeholder="请输入用户名" ref="name" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showsex" position="bottom">
      <van-nav-bar
        left-arrow
        title="修改性别"
        @click-left="showsex = false"
      ></van-nav-bar>
      <van-cell title="男" is-link @click="updateGender(0)" />
      <van-cell title="女" is-link @click="updateGender(1)" />
    </van-popup>
    <!-- 修改日期 -->
    <van-popup
      v-model="showpicker"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="updateBirthday"
        @cancel="showpicker = false"
      />
    </van-popup>
  </div>
</template>


<script>
import { mapState } from "vuex";
import { edituserinfo } from "../user/user";
import moment from "moment";
export default {
  name: "edit",
  data() {
    return {
      //显示隐藏修改昵称弹出框
      showdialog: false,
      //输入框值
      value: "",
      //显示隐藏性别框
      showsex: false,
      //从什么时间开始
      minDate: new Date(2020, 0, 1),
      //到什么时间结束
      maxDate: new Date(2025, 10, 1),
      //当前选中日期
      currentDate: new Date(),
      //显示隐藏日期框
      showpicker: false,
    };
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    //显示修改昵称弹窗
    showDialogclick() {
      this.showdialog = true;
      this.value = this.userinfo.name;
      this.$nextTick(() => {
        this.$refs.name.focus();
      });
    },
    isconfirm() {
      this.showdialog = false;
      if (this.value == "") {
        this.$toast.fail("内容为空");
        return false;
      }
      edituserinfo({ name: this.value }).then((res) => {
        this.$toast.success("更新成功");
        this.$store.commit("setuserinfo", {
          ...this.userinfo,
          name: this.value,
        });
      });
    },
    updateGender(sex) {
      this.showsex = false;
      edituserinfo({ gender: sex }).then((res) => {
        this.$toast.success("更新成功");
        this.$store.commit("setuserinfo", {
          ...this.userinfo,
          gender: sex,
        });
      });
    },
    updateBirthday() {
      this.showpicker = false;
      let birthday = moment(this.currentDate).format("YYYY-MM-DD");
      edituserinfo({ birthday }).then((res) => {
        this.$toast.success("更新成功");
        this.$store.commit("setuserinfo", {
            ...this.userinfo,
            birthday:birthday
        });
      });
    },
  },
};
</script>

<style lang="less">
.edit-container {
  // 导航条部分
  .van-nav-bar {
    background-color: #3196fa;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
  // 头像部分
  .avatar {
    padding: 20px 0;
    text-align: center;
    .van-image {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
